---
id: 5dc23991f86c76b9248c6eb8
title: الخطوة 6
challengeType: 0
dashedName: step-6
---

# --description--

في الخطوة السابقة، وضعت عناصر `h1`, و `h2`, و comment, و `p` داخل عنصر `main`. هذا يسمى *nesting*. وينبغي وضع العناصر المتداخلة (nested) بعد مسافتين إلى يمين العنصر الذي تتداخل فيه. هذه المسافات تسمى indentation ويستخدم لجعل HTML أسهل للقراءة.

Here is an example of nesting and indentation:

```html
<main>
  <h1>Most important content of the document</h1>
  <p>Some more important content...</p>
</main>
```

زح (indent) عنصر `h1`, و `h2`, و comment بمسافتين عليهم أكثر من العنصر `main` في الكود أدناه. استخدم زر space على لوحة المفاتيح الخاصة بك لإضافة مسافتين أخريين أمام عنصر `p` بحيث يتم عمل indentation بشكل صحيح أيضا.

# --hints--

يجب أن يحتوي الكود على عنصر `h2` مع نص `Cat Photos`. ربما قمت بحذفه عن طريق الخطأ، او إنه فاقد لكل من العلامتين الافتتاحية والإغلاقية، أو أن النص قد تغير.

```js
assert(
  document.querySelector('h2') &&
    code.match(/<\/h2\>/) &&
    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
```

لا يجب عليك إضافة عناصر `ul` أو `li` من المثال.

```js
assert(
  !document.querySelector('ul') && !document.querySelector('li')
);
```

لا يجب عليك تغيير بُعد عنصرك `h2` في السطر. وينبغي أن تبعد علامة أفتاح (openning tag) من بداية الخط بست (6) مسافات. يمكنك ضغط على زر إعادة التعيين لاستعادة البعد الأصلي.

```js
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
```

الكود الخاص بك يجب أن يحتوي على تعليق (comment). قمت بحذف التعليق في خطوة سابقة.

```js
assert(code.match(/<!--.*-->/));
```

يجب أن يكون نص التعليق `TODO: Add link to cat photos`. لا تقم بتغيير النص أو المسافات في التعليق.

```js
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
```

لا يجب عليك تغيير بُعد عنصرك comment في السطر. وينبغي أن تبعد علامة أفتاح (openning tag) من بداية الخط بست (6) مسافات. يمكنك ضغط على زر إعادة التعيين لاستعادة البعد الأصلي.

```js
assert(
  code
    .toLowerCase()
    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
```

الكود الخاص بك يجب أن يحتوي على عنصر `p`. لقد قمت بإزالة عنصر `p` في خطوة سابقة.

```js
assert(document.querySelector('p'));
```

يجب أن يكون نص عنصر `p` بقيمة `See more cat photos in our gallery.` لا تقم بتغيير النص أو المسافات أو علامات الترقيم لعنصر `p`.

```js
assert(
  document
    .querySelector('p')
    .innerText.toLowerCase()
    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
);
```

يجب أن تكون علامة `p` الافتتاحية مطابقة لعناصرك `h2` وتعليقك. وينبغي أن تبعد علامة أفتاح (openning tag) من بداية الخط بست (6) مسافات.

```js
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    --fcc-editable-region--
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>
    </main>
--fcc-editable-region--
  </body>
</html>
```

